<template>
  <a-card :bordered="false">

    <a-tabs defaultActiveKey="3" @change="callback">

      <a-tab-pane :tab=" $t('statisticalReport.monthlySummary') " key="3">

        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('statisticalReport.yearMonth')">
                  <a-month-picker
                    :placeholder="$t('base.pleaseChoose')"
                    v-model="monthModelValue"
                    @change="monthChange"
                  />
                </a-form-item>
              </a-col>

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('sensor.sensor')">
                  <a-select v-model="queryParam.sensorCode"  v-decorator="[ 'sensorCode']" :placeholder="$t('base.pleaseChoose')">
                    <a-select-option value=""> {{$t('base.pleaseChoose')}} </a-select-option>
                    <a-select-option v-for="item in sensorList" :key="item.id" :value="item.code">
                      {{item.name}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch"> {{$t('base.query')}} </a-button>
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset"> {{$t('base.reset')}} </a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <line-chart-multid class="statistic" :title="$t('sensor.sensor')" :dataSource="countSource" :fields="countFields" :aliases="countAliases" :height="400"/>

      </a-tab-pane>

      <a-tab-pane :tab=" $t('statisticalReport.monthlyTemperature') " key="20">

        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('statisticalReport.yearMonth')">

                  <a-month-picker
                    :placeholder="$t('base.pleaseChoose')"
                    v-model="monthModelValue20"
                    @change="monthChange20"
                  />

                </a-form-item>
              </a-col>

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('sensor.sensor')">
                  <a-select v-model="queryParam.sensorCode20"  v-decorator="[ 'sensorCode20']" :placeholder="$t('base.pleaseChoose')">
                    <a-select-option value="">{{$t('base.pleaseChoose')}}</a-select-option>
                    <a-select-option v-for="item in sensorList" :key="item.id" :value="item.code">
                      {{item.name}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch20">{{$t('base.query')}}</a-button>
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset20"> {{$t('base.reset')}} </a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <line-chart-multid class="statistic" :title=" $t('light.temperatureDw') " :dataSource="countSource20" :fields="countFields20" :aliases="countAliases20" :height="400"/>

      </a-tab-pane>





      <a-tab-pane :tab=" $t('statisticalReport.monthlyHumidity') " key="22">

        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('statisticalReport.yearMonth')">

                  <a-month-picker
                    :placeholder="$t('base.pleaseChoose')"
                    v-model="monthModelValue22"
                    @change="monthChange22"
                  />

                </a-form-item>
              </a-col>

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('sensor.sensor')">
                  <a-select v-model="queryParam.sensorCode22"  v-decorator="[ 'sensorCode22']" :placeholder="$t('base.pleaseChoose')">
                    <a-select-option value=""> {{$t('base.pleaseChoose')}} </a-select-option>
                    <a-select-option v-for="item in sensorList" :key="item.id" :value="item.code">
                      {{item.name}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch22">{{$t('base.query')}}</a-button>
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset22"> {{$t('base.reset')}} </a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <line-chart-multid class="statistic" :title=" $t('sensor.humidity') " :dataSource="countSource22" :fields="countFields22" :aliases="countAliases22" :height="400"/>

      </a-tab-pane>



      <a-tab-pane :tab=" $t('statisticalReport.monthlyPm25') " key="24">

        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('statisticalReport.yearMonth')">

                  <a-month-picker
                    :placeholder="$t('base.pleaseChoose')"
                    v-model="monthModelValue24"
                    @change="monthChange24"
                  />

                </a-form-item>
              </a-col>

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('sensor.sensor')">
                  <a-select v-model="queryParam.sensorCode24"  v-decorator="[ 'sensorCode24']" :placeholder="$t('base.pleaseChoose')">
                    <a-select-option value=""> {{$t('base.pleaseChoose')}} </a-select-option>
                    <a-select-option v-for="item in sensorList" :key="item.id" :value="item.code">
                      {{item.name}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch24">{{$t('base.query')}}</a-button>
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset24"> {{$t('base.reset')}} </a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <line-chart-multid class="statistic" :title=" $t('sensor.pm25') " :dataSource="countSource24" :fields="countFields24" :aliases="countAliases24" :height="400"/>

      </a-tab-pane>

      <a-tab-pane tab="月度CO2表" key="25">

        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('statisticalReport.yearMonth')">

                  <a-month-picker
                    :placeholder="$t('base.pleaseChoose')"
                    v-model="monthModelValue25"
                    @change="monthChange25"
                  />

                </a-form-item>
              </a-col>

              <a-col :md="4" :sm="6">
                <a-form-item :label="$t('sensor.sensor')">
                  <a-select v-model="queryParam.sensorCode25"  v-decorator="[ 'sensorCode25']" :placeholder="$t('base.pleaseChoose')">
                    <a-select-option value=""> {{$t('base.pleaseChoose')}} </a-select-option>
                    <a-select-option v-for="item in sensorList" :key="item.id" :value="item.code">
                      {{item.name}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-button style="margin-top: 2px" type="primary" icon="search" @click="chartSearch25">{{$t('base.query')}}</a-button>
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="chartSearchReset25"> {{$t('base.reset')}} </a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <line-chart-multid class="statistic" title="CO2" :dataSource="countSource25" :fields="countFields25" :aliases="countAliases25" :height="400"/>

      </a-tab-pane>

    </a-tabs>




  </a-card>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import Pie from '@/components/chart/Pie'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import ACol from 'ant-design-vue/es/grid/Col'
  import { getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import { httpAction } from '@/api/manage'
  import JDate from '@/components/jeecg/JDate'
  import moment from 'moment'//导入文件

  export default {
    name: 'GlrSensorDataDay',
    mixins:[JeecgListMixin],
    components: {
      ACol,
      Bar,
      Pie,
      JInput,
      JDate,
      LineChartMultid,
    },
    data() {
      return {
        description: this.$t('statisticalReport.environmentalMonitoringStatistics') ,
        monthModelValue:moment(),
        monthModelValue20:moment(),
        monthModelValue21:moment(),
        monthModelValue22:moment(),
        monthModelValue23:moment(),
        monthModelValue24:moment(),
        monthModelValue25:moment(),
        monthValue: [],
        monthValue20: [],
        monthValue21: [],
        monthValue22: [],
        monthValue23: [],
        monthValue24: [],
        monthValue25: [],

        // 数据集
        countSource: [],
        countSource20: [],
        countSource21: [],
        countSource22: [],
        countSource23: [],
        countSource24: [],
        countSource25: [],
        countFields: [],
        countFields20: [],
        countFields21: [],
        countFields22: [],
        countFields23: [],
        countFields24: [],
        countFields25: [],
        countAliases: [],
        countAliases20: [],
        countAliases21: [],
        countAliases22: [],
        countAliases23: [],
        countAliases24: [],
        countAliases25: [],
        disableMixinCreated:true,
        sensorList:[],
        url: {
          lightReportChart:"/glr/glrSensorData/tBSensorChartData",
          getGlrSensorList:"/glr/glrSensor/getGlrSensorList",
        },
      }
    },
    created() {
      const that = this;
      this.monthValue=moment(new Date()).format("YYYY-MM")
      this.monthValue20=moment(new Date()).format("YYYY-MM")
      this.monthValue21=moment(new Date()).format("YYYY-MM")
      this.monthValue22=moment(new Date()).format("YYYY-MM")
      this.monthValue23=moment(new Date()).format("YYYY-MM")
      this.monthValue24=moment(new Date()).format("YYYY-MM")
      this.monthValue25=moment(new Date()).format("YYYY-MM")

      httpAction(that.url.getGlrSensorList,{},"post").then((res)=>{
        if(res.success){
          that.sensorList=res.result;
        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
      });

      this.loadDate(this.url.lightReportChart,'year',{type:10,sensorCode:'',yearMonth:this.monthValue});
      this.loadDate20(this.url.lightReportChart,'year',{type:20,sensorCode:'',yearMonth:this.monthValue20});
      this.loadDate20(this.url.lightReportChart,'year',{type:21,sensorCode:'',yearMonth:this.monthValue21});
      this.loadDate20(this.url.lightReportChart,'year',{type:22,sensorCode:'',yearMonth:this.monthValue22});
      this.loadDate20(this.url.lightReportChart,'year',{type:23,sensorCode:'',yearMonth:this.monthValue23});
      this.loadDate20(this.url.lightReportChart,'year',{type:24,sensorCode:'',yearMonth:this.monthValue24});
      this.loadDate20(this.url.lightReportChart,'year',{type:25,sensorCode:'',yearMonth:this.monthValue25});


    },
    methods: {
      loadDate(url,type,param) {
        getAction(url,param,'get').then((res) => {
          this.countFields=['humidity','temperature','pm25','CO2'];
          this.countAliases=[
            {field:'humidity',alias: this.$t('sensor.humidity') },
            {field:'temperature',alias: this.$t('light.temperatureDw')},
            {field:'pm25',alias: this.$t('sensor.pm25Dw') },
            {field:'CO2',alias: 'CO2(ppm)' }
            ]
          let dateList=res.dateList;
          let humidity=res.shiduList;
          let temperature=res.wenduList;
          let pm25=res.pm25List;
          let CO2=res.pm10List;
          let bb=[]
          for(var j = 0,len=dateList.length; j < len; j++) {
           let aa={ type: dateList[j], humidity: humidity[j], temperature: temperature[j] , pm25: pm25[j], CO2: CO2[j]  };
           bb.push(aa);
          }
          this.countSource=bb;
        })
      },
      loadDate20(url,type,param) {
        var paramType=param.type;
        getAction(url,param,'get').then((res) => {
          if (paramType==20){
            var stfname='temperature';
            var stdname=this.$t('light.temperatureDw');
            this.countFields20=[stfname+'_max',stfname+'_avg',stfname+'_min'];
            this.countAliases20=[
              {field:stfname+'_max',alias: this.$t('statisticalReport.highest') +stdname},
              {field:stfname+'_avg',alias: this.$t('statisticalReport.average') +stdname},
              {field:stfname+'_min',alias: this.$t('statisticalReport.minimum') +stdname},
            ]
          }
          if (paramType==22){
            var stfname='humidity';
            var stdname= this.$t('sensor.humidity') ;
            this.countFields22=[stfname+'_max',stfname+'_avg',stfname+'_min'];
            this.countAliases22=[
              {field:stfname+'_max',alias:this.$t('statisticalReport.highest')+stdname},
              {field:stfname+'_avg',alias:this.$t('statisticalReport.average')+stdname},
              {field:stfname+'_min',alias:this.$t('statisticalReport.minimum')+stdname},
            ]
          }
          if (paramType==24){
            var stfname='pm25';
            var stdname='PM2.5(ug/m³)';
            this.countFields24=[stfname+'_max',stfname+'_avg',stfname+'_min'];
            this.countAliases24=[
              {field:stfname+'_max',alias:this.$t('statisticalReport.highest')+stdname},
              {field:stfname+'_avg',alias:this.$t('statisticalReport.average')+stdname},
              {field:stfname+'_min',alias:this.$t('statisticalReport.minimum')+stdname},
            ]
          }
          if (paramType==25){
            var stfname='CO2';
            var stdname='CO2(ppm)';
            this.countFields25=[stfname+'_max',stfname+'_avg',stfname+'_min'];
            this.countAliases25=[
              {field:stfname+'_max',alias:this.$t('statisticalReport.highest')+stdname},
              {field:stfname+'_avg',alias:this.$t('statisticalReport.average')+stdname},
              {field:stfname+'_min',alias:this.$t('statisticalReport.minimum')+stdname},
            ]
          }
          let newList=res.newList;
          let minList=res.minList;
          let avgList=res.avgList;
          let maxList=res.maxList;
          let bb=[]
          for(var j = 0,len=newList.length; j < len; j++) {
            if (paramType==20){
              let aa={ type: newList[j], temperature_max: maxList[j], temperature_min: minList[j], temperature_avg: avgList[j] };
              bb.push(aa);
            }
            if (paramType==22){
              let aa={ type: newList[j], humidity_max: maxList[j], humidity_min: minList[j], humidity_avg: avgList[j] };
              bb.push(aa);
            }
            if (paramType==24){
              let aa={ type: newList[j], pm25_max: maxList[j], pm25_min: minList[j], pm25_avg: avgList[j] };
              bb.push(aa);
            }
            if (paramType==25){
              let aa={ type: newList[j], CO2_max: maxList[j], CO2_min: minList[j], CO2_avg: avgList[j] };
              bb.push(aa);
            }
          }
          if (paramType==20) this.countSource20=bb;
          if (paramType==21) this.countSource21=bb;
          if (paramType==22) this.countSource22=bb;
          if (paramType==23) this.countSource23=bb;
          if (paramType==24) this.countSource24=bb;
          if (paramType==25) this.countSource25=bb;

        })
      },

      // 按月份查询
      chartSearch(){
        let sensorCode=this.queryParam.sensorCode
        this.loadDate(this.url.lightReportChart,'year',{type:10,sensorCode:sensorCode,yearMonth:this.monthValue});
      },
      chartSearch20(){
        let sensorCode=this.queryParam.sensorCode20
        this.loadDate20(this.url.lightReportChart,'year',{type:20,sensorCode:sensorCode,yearMonth:this.monthValue20});
      },
      chartSearch21(){
        let sensorCode=this.queryParam.sensorCode21
        this.loadDate20(this.url.lightReportChart,'year',{type:21,sensorCode:sensorCode,yearMonth:this.monthValue21});
      },
      chartSearch22(){
        let sensorCode=this.queryParam.sensorCode22
        this.loadDate20(this.url.lightReportChart,'year',{type:22,sensorCode:sensorCode,yearMonth:this.monthValue22});
      },
      chartSearch23(){
        let sensorCode=this.queryParam.sensorCode23
        this.loadDate20(this.url.lightReportChart,'year',{type:23,sensorCode:sensorCode,yearMonth:this.monthValue23});
      },
      chartSearch24(){
        let sensorCode=this.queryParam.sensorCode24
        this.loadDate20(this.url.lightReportChart,'year',{type:24,sensorCode:sensorCode,yearMonth:this.monthValue24});
      },
      chartSearch25(){
        let sensorCode=this.queryParam.sensorCode25
        this.loadDate20(this.url.lightReportChart,'year',{type:25,sensorCode:sensorCode,yearMonth:this.monthValue25});
      },
      chartSearchReset(){
        this.monthModelValue=moment();
        this.monthValue=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode = "";
        this.loadDate(this.url.lightReportChart,'year',{type:10,sensorCode:'',yearMonth:this.monthValue});
      },
      chartSearchReset20(){
        this.monthModelValue20=moment();
        this.monthValue20=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode20 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:20,sensorCode:'',yearMonth:this.monthValue20});
      },
      chartSearchReset21(){
        this.monthModelValue21=moment();
        this.monthValue21=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode21 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:21,sensorCode:'',yearMonth:this.monthValue21});
      },
      chartSearchReset22(){
        this.monthModelValue22=moment();
        this.monthValue22=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode22 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:22,sensorCode:'',yearMonth:this.monthValue22});
      },
      chartSearchReset23(){
        this.monthModelValue23=moment();
        this.monthValue23=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode23 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:23,sensorCode:'',yearMonth:this.monthValue23});
      },
      chartSearchReset24(){
        this.monthModelValue24=moment();
        this.monthValue24=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode24 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:24,sensorCode:'',yearMonth:this.monthValue24});
      },
      chartSearchReset25(){
        this.monthModelValue25=moment();
        this.monthValue25=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode25 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:25,sensorCode:'',yearMonth:this.monthValue25});
      },
      chartSearchReset26(){
        this.monthModelValue26=moment();
        this.monthValue26=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode26 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:26,sensorCode:'',yearMonth:this.monthValue26});
      },
      chartSearchReset27(){
        this.monthModelValue27=moment();
        this.monthValue27=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode27 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:27,sensorCode:'',yearMonth:this.monthValue27});
      },
      chartSearchReset28(){
        this.monthModelValue28=moment();
        this.monthValue28=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode28 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:28,sensorCode:'',yearMonth:this.monthValue28});
      },
      chartSearchReset29(){
        this.monthModelValue29=moment();
        this.monthValue29=moment(new Date()).format("YYYY-MM");
        this.queryParam.sensorCode29 = "";
        this.loadDate20(this.url.lightReportChart,'year',{type:29,sensorCode:'',yearMonth:this.monthValue29});
      },
      // 选择月份日期
      monthChange(value, mode) {
        this.monthValue = mode
      },
      monthChange20(value, mode) {
        this.monthValue20 = mode
      },
      monthChange21(value, mode) {
        this.monthValue21 = mode
      },
      monthChange22(value, mode) {
        this.monthValue22 = mode
      },
      monthChange23(value, mode) {
        this.monthValue23= mode
      },
      monthChange24(value, mode) {
        this.monthValue24 = mode
      },
      monthChange25(value, mode) {
        this.monthValue25 = mode
      },
      // 选择统计图类别
      callback(key) {
        if(key === "3"){
        }
        if(key === "2"){
        }
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .statistic {
    padding: 0px !important;
    margin-top: 50px;
  }

  .statistic h4 {
    margin-bottom: 20px;
    text-align: center !important;
    font-size: 24px !important;;
  }

  .statistic #canvas_1 {
    width: 100% !important;
  }
</style>